<template>
  <div class="editor-container">
    <quill-editor
      ref="editor"
      v-model:content="modelValue"
      contentType="html"
      theme="snow"
      :options="editorOptions"
    />
  </div>
</template>

<script lang="ts" setup>
import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";

// 编辑器配置
const editorOptions = ref({
  modules: {
    toolbar: [
      ["bold", "italic", "underline", "strike"], // 粗体、斜体
      [{ list: "ordered" }, { list: "bullet" }], // 列表
      [{ header: [1, 2, 3, false] }], // 标题
      [{ align: [] }], // 对齐
      ["link", "image"], // 链接、图片
      [{ color: [] }, { background: [] }], // 颜色
      ["clean"], // 清除格式
    ],
  },
  placeholder: "请输入内容...",
});

const editorRef = shallowRef();

// 双向绑定
const modelValue = defineModel("modelValue", {
  type: String,
  required: false,
});

defineExpose({
  editor: editorRef,
  clearContent: () => {
    editorRef.value?.getQuill().setText("\n");
  },
  setContent: (content: string) => {
    editorRef.value?.getQuill().setText(content);
  },
  enable: (bool: boolean) => {
    editorRef.value?.getQuill().enable(bool);
  },
});
</script>

<style lang="scss" scoped>
.editor-container {
  height: 500px;
  width: 700px;
  margin-bottom: 50px;
}
</style>
